<template>
  <div class="GdwyyAppRealTimeMonitoring">
    <GdwyyAppBigTitle title="实时监控" icon="实时监控" time="" color="green">
      <!-- <span slot="default">数据更新时间：10s前；单位：户</span> -->
      <span slot="default">单位：户</span>
    </GdwyyAppBigTitle>

    <van-loading v-if="loading" type="spinner" color="#1989fa" />

    <div class="main" v-else>
      <div
        class="item flex-center mgb-12"
        v-for="(item, index) in list"
        :key="index + 'listr'"
        :class="['item--' + item.bgColor]"
      >
        <div class="item-width" v-for="(ite, inx) in item.list" :key="inx + 'listrr'">
          <div class="flex-center">
            <img class="icon" :src="require('../../../../assets/imgs/reconsitution/' + ite.icon + '.png')" />
            <div class="font-13 color333">{{ ite.title }}</div>
          </div>
          <div class="font-20 num" :class="['main-' + item.color]">{{ zlData[ite.num] || 0 }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { GdwyyAppBigTitle } from '@/components/reconsitution/index.js'
import { reconsitutionMixin } from '@/mixins/reconsitutionMixin.js'
const _apiConfig = [
  {
    url: '8a31cdd68a7e768a018acc1212800025',
    resultParamsName: 'zlData',
  },
]

export default {
  name: 'GdwyyAppRealTimeMonitoring',
  mixins: [reconsitutionMixin],
  components: {
    GdwyyAppBigTitle,
  },
  data() {
    return {
      zlData: {},
      loading: false,
      queryParam: {
        gridId: '',
        dayId: '',
      },
      list: [
        {
          bgColor: 'green',
          color: 'green',
          list: [
            {
              icon: 'ssjk_ywsj',
              title: '移网手机',
              num: 'YW_SJ_FZ',
            },
            {
              icon: 'ssjk_kd',
              title: '宽带',
              num: 'KD_FZ',
            },
            {
              icon: 'ssjk_FTTR',
              title: 'FTTR',
              num: 'FTTR_FZ',
            },
          ],
        },
        {
          bgColor: 'org',
          color: 'org',
          list: [
            {
              icon: 'ssjk_zj',
              title: '装机竣工量',
              num: 'ZJ_JGL',
            },
            {
              icon: 'ssjk_yj',
              title: '移机竣工量',
              num: 'YJ_JGL',
            },
            {
              icon: 'ssjk_xj',
              title: '修机竣工量',
              num: 'XJ_JGL',
            },
          ],
        },
      ],
    }
  },

  create() {
    this.loading = true
    this.initData()
    const { setAllRequest, queryParam } = this

    function main(e) {
      if (e.key === '$dialogFinish' && e.newValue) {
        localStorage.setItem('$dialogFinish', '')
        setAllRequest(_apiConfig, { ...queryParam, gridId: localStorage.getItem('$gridId') })
        // window.removeEventListener('storage', main)
      }
    }
    window.addEventListener('storage', main)
  },

  methods: {
    initDataPostHook(data) {
      this.setAllRequest(_apiConfig, this.queryParam)
      this.loading = false
    },
  },
}
</script>

<style lang="less" scoped>
@import '~@assets/less/reconsitution/common.less';
.GdwyyAppRealTimeMonitoring {
  margin-bottom: 3.2vw;
  .main {
    padding: 0 4vw;
    box-sizing: border-box;
    background-color: #fff;
    padding-bottom: 1.0667vw;
    padding-top: 3.2vw;
    .item {
      .bg('bg-card-发展.png');
      width: 92vw;
      height: 18.6667vw;
      padding-left: 10.6667vw;
      padding-right: 2.6667vw;
      box-sizing: border-box;

      &--org {
        .bg('bg-card-交付.png');
      }
      .item-width {
        width: 33%;
      }
      .icon {
        width: 3.7333vw;
        height: 3.7333vw;
        margin-right: 1.6vw;
      }
      .num {
        margin-top: 1.6vw;
        margin-left: 3.7333vw;
      }
    }
  }
}
</style>